<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Archer 首页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
    <style>

        /*走马灯*/
        .carousel {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .carousel ul {
            list-style-type: none;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
            animation: carousel-animation 10s infinite;
        }

        .carousel li {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        @keyframes carousel-animation {
            0% {
                transform: translateX(0);
            }
            20% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-100%);
            }
            45% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(-200%);
            }
            70% {
                transform: translateX(-200%);
            }
            75% {
                transform: translateX(-300%);
            }
            95% {
                transform: translateX(-300%);
            }
            100% {
                transform: translateX(0);
            }
        }

        /* Reset default styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Set global styles */
        body {
            background-color: #90bb85;
            background-image: url('/img/snowflake.png');
            animation: snowfallAnimation 10s linear infinite;
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: #333;
        }
        /* Background animation */

        @keyframes snowfallAnimation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 0 100%;
            }
        }


        a {
            text-decoration: none;
            color: #333;
        }

        ul {
            list-style: none;
        }

        /* Header styles */
        header {
            background-color: #f6f0f0;
            padding: 20px 0;
        }

        nav {
            background-color: #f6f0f0;
            max-width: 960px;
            margin: 0 auto;
        }

        nav ul {
            display: flex;
            justify-content: space-between;
        }

        nav li {
            margin-right: 25px;
        }

        nav a {
            font-size: 20px;
        }

        /* Section styles */
        section {
            max-width: 960px;
            margin: 40px auto;
        }

        h2 {
            font-size: 32px;
            margin-bottom: 20px;
        }

        p {
            margin-bottom: 10px;
        }

        /* Footer styles */
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px 20px;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
        }

        footer p {
            text-align: center;
        }

        /*
        固定顶部
         */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #f1f1f1;
            padding: 1px;
            z-index: 9999;
        }

        .content {
            margin-top: 60px; /* 为了避免导航栏遮挡内容，给内容添加上边距 */
            /* 其他样式 */
        }

    </style>
</header>

<div class="navbar">
    <nav>
        <ul>
            <li><a href="#section1">射箭介绍</a></li>
            <li><a href="#section2">射箭装备</a></li>
            <li><a href="#section3">射箭技巧</a></li>
            <li><a href="#section4">射箭比赛</a></li>
        </ul>
    </nav>
</div>

<div class="content">
    <section id="section1">
        <h2>射箭介绍</h2>
        <p>射箭是一项古老的技艺，既可以作为一项竞技运动，也可以作为一种休闲娱乐活动。它需要弓箭手运用技巧和专注力来射击目标。</p>
        <div class="carousel">
            <ul>
                <li><img src="img/introduce/background.jpg" alt="Image 1"></li>
                <li><img src="img/introduce/background.jpg" alt="Image 2"></li>
                <li><img src="img/introduce/background.jpg" alt="Image 3"></li>
                <li><img src="img/introduce/background.jpg" alt="Image 4"></li>
            </ul>
        </div>
    </section>

    <section id="section2">
        <h2>射箭装备</h2>
        <p>在射箭运动中，常用的装备包括弓、箭、腰箭包、护臂、保护手套等。这些装备可以帮助弓箭手提高准确性和保护自己。</p>
        <div class="carousel">
            <ul>
                <li><img src="img/equip/background.jpg" alt="Image 1"></li>
                <li><img src="img/equip/background.jpg" alt="Image 2"></li>
                <li><img src="img/equip/background.jpg" alt="Image 3"></li>
                <li><img src="img/equip/background.jpg" alt="Image 4"></li>
            </ul>
        </div>
    </section>

    <section id="section3">
        <h2>射箭技巧</h2>
        <p>射箭技巧包括正确的姿势、瞄准、放箭的方式等。通过训练和实践，弓箭手可以提高他们的技能水平，从而达到更高的目标命中率。</p>
        <div class="carousel">
            <ul>
                <li><img src="img/skill/background.jpg" alt="Image 1"></li>
                <li><img src="img/skill/background.jpg" alt="Image 2"></li>
                <li><img src="img/skill/background.jpg" alt="Image 3"></li>
                <li><img src="img/skill/background.jpg" alt="Image 4"></li>
            </ul>
        </div>
    </section>

    <section id="section4">
        <h2>射箭比赛</h2>
        <p>射箭比赛是一种竞技活动，可以在个人或团队之间进行。参与者将展示他们的技巧和准确性，争夺胜利。</p>
        <div class="carousel">
            <ul>
                <li><img src="img/competition/background.jpg" alt="Image 1"></li>
                <li><img src="img/competition/background.jpg" alt="Image 2"></li>
                <li><img src="img/competition/background.jpg" alt="Image 3"></li>
                <li><img src="img/competition/background.jpg" alt="Image 4"></li>
            </ul>
        </div>
    </section>
    <section id="section5">
        <h2>射箭书籍</h2>
        <p>纪效新书 射法篇</p>

        <p>射经-宋-王踞</p>

        <p>射学指南 明 高武 杨惟明</p>

        <p>武经射学正宗</p>

        <p>【射学】射经 明·李呈芬</p>

        <p>顾镐 射说</p>

        <p>刘奇射法指南车</p>

        <p>学射录 李塨</p>

        <p>征南射法 黄百家</p>

        <p>贯虱心传</p>
        <div class="carousel">
            <ul>
                <li><img src="img/competition/background.jpg" alt="Image 1"></li>
                <li><img src="img/competition/background.jpg" alt="Image 2"></li>
                <li><img src="img/competition/background.jpg" alt="Image 3"></li>
                <li><img src="img/competition/background.jpg" alt="Image 4"></li>
            </ul>
        </div>
    </section>

</div>
<footer>
    <p>&copy; 2023 射箭首页. Archer Index.</p>
</footer>
</body>
</html>

